<template>
  <div class="outline-parent jy-style-height">
    <div class="outline jy-style-height">
      <div class="outline-shadow">
        <div class="outline-title"> 
          {{ props.info.text }} 
        </div> 
        <div class="outline-info">
          <img v-if="props.info.value" class="outline-cover" :src="urls + props.info.value" alt="" />
          <p class="outline-subTitle">{{ props.info.subTitle }}</p>
          <p class="outline-remarks-solid"></p>
          <p class="outline-remarks">   
            <textMode :title="props.info.text" :row="4" :maxheight="0.94" :data="props.info.remarks" > </textMode>
            <!-- {{ props.info.remarks }} -->
            </p>
        </div>
      </div>
      <img src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/door/zyGroupdg.png" alt="" />
    </div>
  </div>
</template> 

<script setup lang="ts"> 
import textMode from "../textMode/textMode.vue"
import { urls } from '@/utils/request/upload';
const props = defineProps({
  info: {
    type: Object,
  },
});
</script>

<style scoped lang="less">
.outline-parent {
  position: relative;
  
}
.outline {
  position: relative;

  margin-right: 50px;
  
  img {
    width: auto;
    height: 100%; 
    object-fit: contain;
  }
}
.outline-shadow {
  display: flex;   
  position: absolute; 
  top: 11vh;
  left: 0;
  width: 80%;
  height: 77.8vh;
  padding: 48px 24px;
}
.outline-title {
  width: 32px;
  height: 252px;
  font-family: SourceHanSerifCN, SourceHanSerifCN;
  font-weight: bold;
  font-size: 32px; 
  color: rgba(0, 0, 0, 0.8);
  line-height: 36px; 
  text-align: center;
}
.outline-info {
  display: flex; 
  flex-direction: column;  
  flex: 1;
  margin-left: 20px;
} 
.outline-cover {
  width: 100%;
  max-height: 172px;
  object-fit: contain;
  margin-bottom: 28px;
}
.outline-subTitle { 
  width: 100%;
  font-weight: 500;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 28px;
  text-align: center;
}
.outline-remarks-solid {
  width: calc(100% - 12px);
  height: 24px;
  box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.38);
  margin-top: 32px;
}
.outline-remarks {
  display: -webkit-box; //特别显示模式
  width: 100%;
  height: 160px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.59);
  line-height: 32px;
  
}
</style>